import { defineComponent, ref, reactive } from "vue";
import styles from "./insuranceKnowledge.module.less";
import { imgPath } from "@/common/utils";
import { RouterView } from "vue-router";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  name: "insuranceKnowledge",
  setup() {
    const tabs = reactive({
      list: [
        {
          key: 1,
          tab: "首页",
          name: "insuranceKnowledgeHome",
          isActive: true,
        },
        {
          key: 2,
          tab: "公司概况",
          name: "companyOverview",
          isActive: false,
        },
        {
          key: 3,
          tab: "新闻中心",
          name: "newsCenter",
          isActive: false,
        },
        {
          key: 4,
          tab: "服务范围",
          name: "servicescope",
          isActive: false,
        },
        {
          key: 5,
          tab: "信息披露",
          name: "information",
          isActive: false,
        },
        {
          key: 6,
          tab: "发布公告",
          name: "announcement",
          isActive: false,
        },
        {
          key: 7,
          tab: "人才招聘",
          name: "recruitment",
          isActive: false,
        },
      ],
      headImage: imgPath("/insuranceKnowledge/logo.png"),
    });
    const router = useRouter();
    const navTo = (item: any) => {
      router.push({
        name: item.name,
      });
    };
    const tab_Click = (e: any) => {
      tabs.list.forEach((item: any) => {
        item.isActive = false;
      });
      e.isActive = true;
      navTo(e);
    };
    tab_Click(tabs.list[0]);
    // 主体部分
    const Main = () => (
      <div class={styles.main}>
        <RouterView />
      </div>
    );
    const Tabs = () => (
      <div class={styles.TabsBox}>
        <div class={styles.Tabslist}>
          {tabs.list.map((item: any) => {
            return (
              <div
                class={[styles.Tabsli, item.isActive && styles["Tabsli_cheak"]]}
                onClick={() => {
                  tab_Click(item);
                }}
              >
                {item.tab}
              </div>
            );
          })}
        </div>
      </div>
    );
    return () => (
      <div class={styles.insuranceKnowledge}>
        <div class={styles.insuranceKnowledgeContent}>
          <div class={styles.headBox}>
            <div class={styles.headr}>
              <span>美好讲堂</span>
            </div>
          </div>
          <div class={styles.contentBox}>
          <div class={styles.headContent}>
              报案、咨询、投诉及建议：400-616-9933
              <span>【中文 / EN】</span>
            </div>
            <div class={styles.headBottom}>
              <div class={styles["headBottom_head"]}>
                {/* <img src={tabs.headImage}></img> */}
                <div class={styles.logo}></div>
              </div>
              <Tabs />
            </div>
            <Main />
          </div>
        </div>
      </div>
    );
  },
});
